<template>
  <div>
    <div class="row-header">
      <el-form :inline="true" :model="form" label-width="100px" class="demo-form-inline">
        <el-form-item label="卡号">
          <el-input v-model.trim="form.cardNumber" placeholder="请输入卡号" maxlength="25"></el-input>
        </el-form-item>
        <el-form-item label="套餐模糊查询">
          <el-input v-model.trim="form.mealName" placeholder="请输入套餐名称" maxlength="25"></el-input>
        </el-form-item>
      </el-form>
      <div class="row-form-btn"><el-button type="shenda" size="small" @click="findList" icon="el-icon-search">查询</el-button></div>
    </div>
    <div class="split-line"></div>
    <div class="row-main">
      <el-table :data="tableData" style="text-align: center" class="row-main-table" :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }"
                 v-loading.fullscreen="tableLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
        <el-table-column prop="id" label="订单序号" width="170" align="center"></el-table-column>
        <el-table-column prop="cardNumber" label="业务号码" align="center"></el-table-column>
        <el-table-column prop="mealName" label="套餐" align="center"></el-table-column>
        <el-table-column prop="money" label="售出金额" align="center"></el-table-column>
        <el-table-column prop="oemCost" label="套餐成本价" align="center"></el-table-column>
        <el-table-column prop="agentBalance" label="代理余额" align="center"></el-table-column>
        <el-table-column prop="mark" label="备注" align="center"></el-table-column>
        <el-table-column prop="dictStatusName" label="状态" align="center"></el-table-column>
        <el-table-column prop="insertTime" label="时间" align="center"></el-table-column>
        <el-table-column label="操作" width="130" align="center">
          <template v-slot="{ row, rowIndex }">
            <el-button type="shenda" @click="retry(row.id)" :loading="buttonRetryLoading" v-preventReClick size="mini"> 重试</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div :style="{'overflow-x': $store.state.app.screenWidth<992?'scroll':'none'}">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          class="row-main-pager"
          :current-page.sync="page.current"
          :page-size="page.size"
          :total="page.total"
          layout="total, sizes, prev, pager, next, jumper"
          background></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
    import {oemTransList,retryOemTrans} from '@/api/getData'
    export default {
        name: "oemTransOrder",
        data(){
          return {
            form:{
              cardNumber:null,
              mealName:null
            },
            buttonRetryLoading:false,
            tableData: [
            ],
            page: {
              current: 1,
              size: 10,
              total: 0
            },
            tableLoading: false,
          }
        },
      created(){
        this.findList()
      },
      methods:{
        findList () {
          this.loading = true;
          this.tableLoading = true;
          oemTransList({page:this.page,cardNumber: this.form.cardNumber,mealName: this.form.mealName}).then(response => {
            this.tableData = response.data.records
            this.page.total = response.data.total
            this.loading = false;
            this.tableLoading = false
          }).catch(e => {
            this.loading = false;
            this.tableLoading = false
          })
        },
        handleSizeChange(val){
          this.page.size = val;
          this.current = 1;
          this.findList();
        },
        handleCurrentChange(val){
          this.page.current = val;
          this.findList();
        },
        retry(id){
          this.buttonRetryLoading = true;
          retryOemTrans({id}).then(r=>{
            if(r._result){
              this.$message.success("操作成功!");

              this.findList()
            }
            this.buttonRetryLoading=false;
          })
        }

      }
    }
</script>

<style scoped>

</style>
